.hero {
  padding-bottom: 5rem;
}

.hero img {
  border: 4px solid var(--sl-color-white);
  border-radius: 80px;
}

.hero h1 {
  text-indent: -0.0666em;
  font-size: 9rem;
}

.tagline {
  font-size: var(--sl-text-3xl);
}

.action.primary {
  background-color: var(--sl-color-orange);
}

.action.primary:hover {
  background-color: var(--sl-color-bright-orange);
}

:root {
  .action.primary {
    color: var(--sl-color-white);
    border: 1px solid var(--sl-color-white);
  }
}

:root[data-theme='light'] {
  .hero img {
    border-color: var(--sl-color-black);
  }

  .action.primary {
    color: var(--sl-color-black);
    border: 2px solid var(--sl-color-black);
  }

  .action.primary svg {
    color: var(--sl-color-black);
  }
}
